import React,{Component} from 'react';

import {connect} from 'react-redux';

import {bindActionCreators} from 'redux';

import * as officialActions from '@/store/actions/official';  //{getBrandList:() => {},change:()=>{}}

import Loading from '@/components/loading';

import style from './style.module.scss';

import LazyImage from '@/components/lazyImage';

console.log(style)

class Official extends Component{
    render(){
        let {brandList} = this.props;
        return <div className="container">
            { Object.keys(brandList).length ? this.renderList() : <Loading></Loading>}
        </div>
    }

    renderList = () => {
        let {brandList} = this.props;
        console.log(brandList)
        return <div className={style.wrap}>
            {/* 导航菜单 */}
            <nav className={style['nav']}>
                <ul>
                    <li>#</li>
                    {Object.keys(brandList).map((item,index) => <li ind={index} key={item} onClick={this.scrollToElement}>{item}</li>)}
                </ul>
            </nav>
            {/* 车牌列表 */}
            <LazyImage className={style['list-content']} options={{
                imgSrc:'data-url'
            }} ref="scrollImg">
                <section>
                    {
                        Object.keys(brandList).map(item => <div key={item}  className={style['item']}>
                            <h4>{item}</h4>
                            {
                                brandList[item].map(v => <dl key={v.MasterID}>
                                    <dt>
                                        <img data-url={v.CoverPhoto} src={require('../../static/bg.png')} alt=""/>
                                    </dt>
                                    <dd>
                                        {v.Name}
                                    </dd>
                                </dl>)
                            }
                        </div>)
                    }
                </section>
            </LazyImage>
        </div>  
    }

    componentDidMount(){
        //获取车牌数据
        this.props.getBrandList();
    }

    //滚动到指定的位置
    scrollToElement = (e) => {
        let ind = e.target.getAttribute('ind'); //index
        this.refs.scrollImg.scrollToElement(ind);
    }
}

//bindActionCreators 实现原理
// const bindActionCreators = (officialActions,dispatch) => {
//     return Object.keys(officialActions).reduce((prev,cur) => {
//         prev[cur] = (...argv) => {
//             return officialActions[cur](...argv)(dispatch);
//         }
//         return prev
//     },{}) 
// }

export default connect((state) => {
    return {
        brandList:state.official.brandList
    }
},
    // (dispatch) => {
    //     return {
    //         getBrandList(){
    //             getBrandList()(dispatch)
    //         },
    //         change(){
    //             disaptch(change())
    //         }
    //     }
    // }

    (dispatch) => {
        return bindActionCreators(officialActions,dispatch)
    }
)(Official)